<template>
  <div class="warn-box warn-detail" @click.stop="handleClose">
    <div :class="warnObj.typeName && (warnObj.typeName.indexOf('敏感') !== -1) ? 'slice' : ''">
      <div class="title" :class="['justify-between', 'warn-box__tips', warnColor]">
        <span>{{ warnObj.warningTypeName }}</span>
        <!--      <i class="el-icon-circle-close"></i>-->
      </div>
      <div class="warn-box__date justify-start align-center">
        <el-image style="width: 100px; height: 100px; margin: 8px 16px 8px 8px" :src="warnObj.path" fit="scale-down"
          :lazy="true" :preview-src-list="list" @click.stop=""></el-image>
        <div style="text-align: left;padding:0 10px">
          <p v-if="warnObj.warningTypeId === '2' || warnObj.warningTypeId === '3' || warnObj.warningTypeId === '1'">{{
            `姓名: ${warnObj.userName ? warnObj.userName : '无'}` }}</p>
          <p v-if="warnObj.warningTypeId === '3'">时长： {{ warnObj.duration }}分钟</p>
          <p v-if="warnObj.warningTypeId === '4'">人数： {{ warnObj.flow }}</p>
          <p v-if="warnObj.warningTypeId === '2'">时段： {{ warnObj.frame }}</p>
          <p v-if="warnObj.warningTypeId === '4'">区域： {{ warnObj.zoneName }}</p>
          <p v-if="warnObj.warningTypeId === '1'">关怀类型： {{ warnObj.careType }}</p>
          <p>时间： {{ timestampToTime(warnObj.updateTime) }}</p>
        </div>
        <div class="frequency" v-if="warnObj.warningTypeId === '2'">
          <p>{{ warnObj.frequency }}</p>次
        </div>
      </div>


      <div class="warn-box__footer justify-between" v-if="dispose">
        <div v-if="warnObj.warningStatus.toString() === '0'" class="warn-box__footer__btn colorFFF938"
          @click.stop="disposeItem('2')">
          <span>立即处理</span>
        </div>
        <!-- <div class="warn-box__footer__btn color5CFBFF">
        <span>转为待办</span>
      </div> -->
        <div v-if="warnObj.warningStatus.toString() === '0' || warnObj.warningStatus.toString() === '2'"
          class="warn-box__footer__btn color5CFBFF" @click.stop="disposeItem('3')">
          <span>消除预警</span>
        </div>
      </div>
      <!-- <user-trace :user-id="userListId" @getRaceId="openTimeLine"></user-trace> -->
      <el-dialog :modal-append-to-body="false" :title="dialogTitle" :visible="dialogVisible" width="25%" >
        <div class="track">
          <user-time-line v-if="dialogVisible" :trace_id="this.warnObj.id" :day="day"  :timeLineArr="timeLineArr"
            @onClose="closeUserModel"></user-time-line>
        </div>
      </el-dialog>

      <el-dialog title="预警详情" :visible.sync="show" width="680px" :append-to-body="true" v-if="dispose">
        <div slot="footer" class="dialog-footer">
          <el-image style="width: 278px; height: 278px;margin-left: 48px" :src="detail.path" fit="fit">
          </el-image>
          <div class="dialog-substance">
            <div class="substance">
              <span class="substance-title">用户姓名：</span>
              <span class="substance-value">{{ detail.userName ? detail.userName : '未识别' }}</span>
            </div>
            <div class="substance">
              <span class="substance-title">用户性别：</span>
              <span class="substance-value">{{ detail.gender ? genderInfo[detail.gender] : '未识别' }}</span>
            </div>
            <div class="substance">
              <span class="substance-title">用户年龄：</span>
              <span class="substance-value">{{ detail.age ? detail.age : '未识别' }}</span>
            </div>
            <div class="substance">
              <span class="substance-title">办理频次：</span>
              <span class="substance-value">{{ detail.frequency ? detail.frequency + '/' + detail.frame : '未识别' }}</span>
            </div>
            <div class="substance">
              <span class="substance-title">办理时长：</span>
              <span class="substance-value">{{ detail.duration ? detail.duration + '分钟' : '未识别' }}</span>
            </div>
            <div class="substance">
              <span class="substance-title">人脸库：</span>
              <span class="substance-value">{{ detail.userType ? detail.userType : '暂无' }}</span>
            </div>
          </div>
          <div class="but">
            <el-button @click="confirm">编辑</el-button>
          </div>
        </div>
      </el-dialog>

      <el-dialog title="人员信息" :visible.sync="show" width="680px" :append-to-body="true" :before-close="handleClose"
        v-if="showEdit">
        <div slot="footer" class="dialog-footers">
          <el-image style="width: 278px; height: 278px;margin-left: 48px" :src="detail.path" fit="fit">
          </el-image>
          <div class="dialog-substances">
            <div class="substance">
              <span class="substance-title">用户姓名</span>
              <el-autocomplete class="inline-input" :fetch-suggestions="querySearchAsync" :popper-append-to-body="false"
                v-model="form.name" placeholder="请输入" @select="handleSelect">
              </el-autocomplete>
            </div>
            <div class="substance substance2">
              <span class="substance-title">用户性别</span>
              <el-select v-model="form.gender" placeholder="请选择">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </div>
            <div class="substance">
              <span class="substance-title">用户年龄</span>
              <el-input v-model="form.age" placeholder="请输入"></el-input>
            </div>
            <div class="substance substance2">
              <span class="substance-title">人员库</span>
              <el-select v-model="form.ku" placeholder="请选择">
                <el-option v-for="item in personnelPoolInfo" :key="item.id" :label="item.typeName"
                  :value="item.id"></el-option>
              </el-select>
            </div>
          </div>
          <div class="but">
            <div class="cancel">
              <el-button @click="cancel">取消</el-button>
            </div>
            <div class="confirm">
              <el-button @click="confirmEdit">确认</el-button>
            </div>
          </div>
        </div>
      </el-dialog>

    </div>

  </div>
</template>

<script>
import {
  earlyWarningProcessing,
  alertDetails
} from "@/api/warning";
import { getPersonnelInformation, getStorehouse, getUserList, listOfPeopleIsAdded } from "@/api/home";

// import UserTrace from "@/components/UserTrace.vue";
import { gettime } from "@/api/warning";
import UserTimeLine from "@/components/UserTimeLinetwo.vue";
import moment from "moment";

export default {
  props: {
    warnObj: {
      type: Object,
      default: () => {
        return {};
      }
    },
    list: {
      default: () => [],
      type: Array
    },
    dispose: {
      type: Boolean,
      default: true,
    }
  },
  created() {
    console.log(666, this.warnObj);
  },
  components: {
    // UserTrace,
    UserTimeLine
  },
  computed: {
    warnColor() {
      let str = "red";
      switch (this.warnObj.warningTypeId) {
        case '1':
          str = "green";
          return str;
        case '4':
          str = "yellow";
          return str;
        case '2':
          str = "red";
          return str;
        case '3':
          str = "orange";
          return str;
        default:
          return str;
      }
    },

  },
  mounted() {
  // this.gettimes();

  },
  data() {
    return {
      timeLineArr:[],
      dialogVisible: false,
      dialogTitle: "最多跑一次预警时间轴",
      day: '',
      show: false,
      showEdit: false,
      detail: {},
      genderInfo: {
        1: '男',
        2: '女'
      },
      form: {
        name: '',
        gender: '',
        age: '',
        ku: '',
        userId: '',
        listId: '',
      },
      personnelPoolInfo: [],
    };
  },
  methods: {
    closeUserModel() {
      this.dialogVisible = false;
    },
   async gettimes(){
  let result = await gettime({
    id: this.warnObj.id,
    warningTypeId:this.warnObj.warningTypeId ,
  })
if(result.code == 200){
  console.log( "111",result);
  
  result.data.forEach((item) => {
          item.traceTime = moment(item.traceTime * 1000).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        });
        this.timeLineArr = result.data;
}
                 
    },
  
    timestampToTime(timestamp) {
      timestamp = timestamp ? timestamp : null;
      let date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    timestampToTime2(timestamp) {
      timestamp = timestamp ? timestamp : null;
      let date = new Date(timestamp);
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return h + m + s;
    },
    async disposeItem(type) {
      let res = await earlyWarningProcessing({
        id: this.warnObj.id,
        warningStatus: type
      })
      if (res.code == 200) {
        this.$message({
          message: '处理成功',
          type: 'success'
        });
      }
      this.$emit('dispose');
    },
   
    handleClose() {
      // this.alertDetails()
      // this.show = true;
     
   
      this.dialogVisible = !this.dialogVisible;
      console.log("this.dialogVisible",this.dialogVisible);
      this.gettimes();
      // this.openTimeLine()
 
      
    },

    async alertDetails() {
      let res = await alertDetails({
        id: this.warnObj.id,
        warningTypeId: this.warnObj.warningTypeId
      })
      if (res.code === 200) {
        console.log("预警详情信息", res.data)
        this.detail = res.data
        console.log(666, res.data)
      }
    },

    handleSelect(item) {
      this.form.listId = item.id;
      this.form.name = item.userName;
      this.form.age = item.age;
      this.form.gender = item.gender.toString();
    },
    async querySearchAsync(queryString, cb) {
      let res = await getPersonnelInformation()
      if (res.code === 200) {
        this.restaurants = res.data;
      }
      let restaurants = this.restaurants.map((terminal) => {
        return {
          value: `${terminal.userName}   ${terminal.gender === 1 ? '男' : '女'}   ${terminal.age}岁`,
          ...terminal
        };
      });
      let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return state.userName.toLowerCase().match(queryString.toLowerCase());
      };
    },

    //人员库
    async getStorehouse() {
      let res = await getStorehouse();
      if (res.code == 200) {
        console.log("人员库", res.data)
        this.personnelPoolInfo = res.data;
      }
    },


    confirm() {
      this.alertDetails();
      //  userId 不为空展示编辑弹窗
      console.log("uerid值", this.detail.userId)
      if (this.detail.userId !== null) {
        this.form.userId = this.detail.userId;
        this.getStorehouse();
        this.showEdit = !this.showEdit;
      } else {
        this.$message("该预警没有处理人，无法编辑！")
      }
    },
    cancel() {
      this.form = {
        name: '',
        gender: '',
        age: '',
        ku: '',
        userId: '',
        listId: '',
      }
      this.showEdit = !this.showEdit;
    },
    async confirmEdit() {
      let res = await listOfPeopleIsAdded({
        userId: this.form.userId,
        userName: this.form.name,
        age: this.form.age,
        gender: this.form.gender,
        userTypeId: this.form.ku,
        listId: this.form.listId,
      });
      console.log("表单信息", {
        userId: this.form.userId,
        userName: this.form.name,
        age: this.form.age,
        gender: this.form.gender,
        userTypeId: this.form.ku,
        listId: this.form.listId,
      })
      if (res.code === 200) {
        await this.getUserLists()
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.form = {
          name: '',
          gender: '',
          age: '',
          ku: '',
          userId: '',
          listId: '',
        }
        await this.alertDetails()
        this.showEdit = !this.showEdit;
      }
    },
    //人员初始化列表
    async getUserLists() {
      let nowDate = parseInt(new Date().getTime() / 1000);

      let res = await getUserList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.startTime
          ? new Date(this.startTime).getTime() / 1000
          : nowDate,
        endTime: this.endTime
          ? new Date(this.endTime).getTime() / 1000
          : nowDate,
        zoneId: this.zoneId, //区域id
        userTypeId: this.userTypeId
      });
      if (res.code === 200) {
        // this.userArr = Array.from(
        //   new Set([...this.userArr, ...res.data.lists])
        // );
        this.userArr = res.data.lists;
        this.totalCount = res.data.count;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
//.box-container {
//  margin-right: 16px !important;
//}
.track{
  overflow: auto;
  height: 500px;
  width: 100%;
  text-align: left;
}
.warn-box {
  width: 100%;
  height: 100%;
  background-image: url("../assets/biankuang-1@2x.png");
  background-size: 100% 100%;

  .title {
    align-items: center;
  }

  &__tips {
    width: 100%;
    height: 30px;
    padding: 4px 12px;
    box-sizing: border-box;
    color: #fff;
  }

  &__date {
    color: #fff;
    height: 100%;
    margin-bottom: -5px;
  }

  &__footer {
    width: 100%;
    display: flex;
    justify-content: space-around;
    // margin: 0 8px;

    &__btn {
      width: 120px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      cursor: pointer;
    }

    .colorFFF938 {
      color: #fff938;
      background: linear-gradient(to right,
          rgba(255, 199, 40, 0),
          rgba(255, 199, 40, 0.4),
          rgba(255, 199, 40, 0));
    }

    .color5CFBFF {
      color: #5cfbff;
      background: linear-gradient(to right,
          rgba(92, 251, 255, 0),
          rgba(92, 251, 255, 0.3),
          rgba(92, 251, 255, 0));
    }
  }

  .red {
    background: linear-gradient(to right,
        rgba(229, 64, 61, 1),
        rgba(229, 64, 61, 0));
  }

  .orange {
    background: linear-gradient(to right,
        rgba(230, 135, 58, 1),
        rgba(230, 135, 58, 0));
  }

  .yellow {
    background: linear-gradient(to right,
        rgba(229, 186, 74, 1),
        rgba(229, 186, 74, 0));
  }

  .green {
    background: linear-gradient(to right,
        rgba(58, 215, 110, 1),
        rgba(58, 215, 110, 0));
  }

  .frequency {
    position: relative;
    height: 40px;
    right: 65px;
    top: -40px;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;

    p {
      font-size: 28px;
      color: red;
      margin-right: 5px;
    }
  }

}

.dialog-footer {
  display: flex;
  align-items: center;

  .dialog-substance {
    margin-left: 40px;
    display: flex;
    font-size: 14px;
    flex-direction: column;
    gap: 14px;
    width: 115px;

    .substance {
      display: flex;

      .substance-title {
        width: 70px;
        color: #949BA4;
        text-align: start;
      }

      .substance-value {
        color: #fff;
      }
    }
  }
}

::v-deep .el-dialog {
  width: 680px;
  height: 539px;
  border-radius: 16px;

  .el-dialog__title {
    font-size: 24px;
    margin-left: 20px;
  }

  .el-icon-close:before {
    font-size: 34px;
  }
}

.slice {
  background-image: url(../assets/slice.png);
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: 40% 85%;
}


.dialog-footers {
  display: flex;
  align-items: center;

  .dialog-substances {
    margin-left: 40px;
    display: flex;
    font-size: 14px;
    flex-direction: column;
    gap: 20px;
    width: 195px;

    .substance {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .substance-title {
        width: 70px;
        color: #949BA4;
        text-align: start;
      }

      .substance-value {
        color: #fff;
      }

      //::v-deep .el-input__suffix {
      //  right: -65px;
      //}
    }
  }
}

.but {
  position: absolute;
  justify-content: center;
  bottom: 40px;
  display: flex;
  width: 100%;
  gap: 20px;

  ::v-deep .el-button {
    width: 146px;
    height: 36px;
    border: 1px solid rgba(92, 251, 255, 1);
    color: #1d1d20;
    background-color: rgba(92, 251, 255, 1);
    ;
  }

  .cancel {
    ::v-deep .el-button {
      color: rgba(92, 251, 255, 1);
      background-color: rgba(48, 49, 54, 0);
    }
  }

  .confirm {
    ::v-deep .el-button {
      color: rgba(23, 24, 26, 1);
      background-color: rgba(92, 251, 255, 1);
    }
  }
}
</style>